<template>
    <div class="app-container">

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="orderQuery.courseTitle" placeholder="课程名称"/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="orderQuery.teacherName" placeholder="讲师名称"/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="orderQuery.nickname" placeholder="会员昵称"/>
            </el-form-item>

            <el-form-item>
                <el-select v-model="orderQuery.payType" clearable placeholder="支付类型">
                <el-option value="1" label="微信"/>
                <el-option value="2" label="支付宝"/>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-select v-model="orderQuery.status" clearable placeholder="订单状态">
                <el-option value="1" label="已支付"/>
                <el-option value="0" label="未支付"/>
                </el-select>
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

         <template>
            <el-table
            :data="orders"
            style="width: 100%"
            border
            highlight-current-row>
            
                <el-table-column
                    label="序号"
                    width="50"
                    align="center">
                    <template slot-scope="scope">
                        {{(current-1)*page+scope.$index+1}}
                    </template>
                </el-table-column>
                
                
                <el-table-column
                    prop="id"
                    label="编号"
                    width="170">
                </el-table-column>

                <el-table-column
                    prop="orderNo"
                    label="订单号"
                    width="160">
                </el-table-column>

                <el-table-column
                    prop="courseId"
                    label="课程编号"
                    width="170">
                </el-table-column>

                <el-table-column
                    prop="courseTitle"
                    label="课程名称"
                    width="220">
                </el-table-column>

                <el-table-column
                    prop="teacherName"
                    label="讲师名称"
                    width="80">
                </el-table-column>


                <el-table-column
                    prop="memberId"
                    label="会员编号"
                    width="170">
                </el-table-column>

                <el-table-column
                    prop="nickname"
                    label="会员昵称"
                    width="140">
                </el-table-column>


                <el-table-column
                    prop="mobile"
                    label="会员手机"
                    width="110">
                </el-table-column>

                <el-table-column
                    prop="totalFee"
                    label="订单金额"
                    width="100">
                </el-table-column>

                <el-table-column
                    prop="payType"
                    label="支付类型"
                    width="100"
                    filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.payType === 1 ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.payType === 1?'微信':'支付宝'}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="status"
                    label="订单状态"
                    width="80"
                    filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.status === 0 ? 'danger' : 'success'"
                        disable-transitions>{{scope.row.status === 0?'未支付':'已支付'}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="gmtCreate"
                    label="创建时间"
                    width="160">
                </el-table-column>

                <el-table-column
                    prop="gmtModified"
                    label="更新时间"
                    width="160">
                </el-table-column>

                <el-table-column
                    prop="courseCover"
                    label="封面"
                    width="150"
                    :show-overflow-tooltip='true'>
                </el-table-column>

                <el-table-column label="是否删除" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            :type="scope.row.isDeleted === 1 ? 'danger' : 'primary'"
                            @click="removeOderById(scope.row)">{{scope.row.isDeleted === 1?'已删除':'未删除'}}</el-button>
                    </template>
                </el-table-column>
            
            </el-table>

        </template>

        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5,10,15,20]"
            :page-size="page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>

//引入order.js文件
import orderApi from '@/api/order/order.js'

export default {
    data(){//定义变量和初始值
        return{
            current:1,//当前页
            page:5,//每页记录数
            total:0,//总记录数
            orderQuery:{
                courseTitle: '',
                teacherName: '',
                nickname: '',
                payType: '',
                status: ''
            },//条件封装对象
            orders:null
        }
    },
    created(){//页面渲染之前执行，一般调用methods定义的方法
        this.getList()
    },
    methods:{//创建具体的方法，调用order.js定义的方法。
        filterTag(value, row) {
            return row.payType === value;
        },
        resetData(){
            this.orderQuery = {},
            this.getList(this.current,this.page)
        },
        //获取订单列表方法
        getList(current = 1,page = 5){
            this.current = current
            this.page = page
            orderApi.getAllOrders(this.current,this.page,this.orderQuery)
            .then(response => {//请求成功
                this.orders = response.data.items
                this.total = response.data.total
            }).catch(error => {//请求失败
                console.log(error)
            })
        },
        handleSizeChange(val){
            this.getList(this.current,val)
        },
        handleCurrentChange(val){
            this.getList(val,this.page)
        },
        removeOderById(row){
            if(row.isDeleted != 1){//未删除
                this.$confirm('是否永久删除此订单：'+row.orderNo+'？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    orderApi.removeOrderById(row.id)
                        .then(res => {
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '该订单已被删除!'
                }); 
            }
        }
        
    }
}
</script>